<template>
  <div id="cardmanagement" class="min_width">
    <!-- 头部导航 -->
    <Header :chooseIt='chooseIt'></Header>
    <main class="mainShow">
      <!-- 左侧导航 -->
      <div class="main-left">
        <!-- 多级导航 -->
        <el-aside width="100%" style="color: #333">
          <el-menu default-active="/cardrechargeol" :router="true" :unique-opened='true'>
          	<!--充值管理-->
            <el-submenu index="/cardrechargeol">
              <template slot="title">充值管理</template>
              <el-menu-item-group>
                <el-menu-item index="/cardrechargeol" :class="{'isActive': active == '/cardrechargeol' }" @click='reload()'>在线充值</el-menu-item>
                <!--<el-menu-item index="/cardrecharge" :class="{'isActive': active == '/cardrecharge' || active == '/cardrecharge' }" @click='reload()'>实体卡充值</el-menu-item>-->
                <el-menu-item index="/userRecharge" :class="{'isActive': active == '/userRecharge'}" @click='reload()'>充值记录</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!--制卡管理-->
          	<!--<el-submenu index="/cardmaking">-->
              <!--<template slot="title">制卡管理</template>-->
              <!--<el-menu-item-group>-->
                <!--<el-menu-item index="/cardmaking" :class="{'isActive': active == '/cardmaking' || active == '/cardmaking' }" @click='reload()'>在线制卡</el-menu-item>           -->
              <!--</el-menu-item-group>-->
            <!--</el-submenu>-->

            <!--普通水卡-->
            <el-submenu index="/virtualCardList">
              <template slot="title">普通水卡</template>
              <el-menu-item-group>
                <el-menu-item index="/virtualCardList" :class="{'isActive': active == '/virtualCardList' || active == '/virtualCardList'||active=='/expenseCalendar'||active=='/operatingData'||active=='/cardCapital'||active=='/editaudit'||active=='/capitaRecords'||active=='/supplementCard' }" @click='reload()'>我的水卡
                </el-menu-item>
                <el-menu-item index="/ordinaryapply" :class="{'isActive': active == '/ordinaryapply' || active == '/verification' }" @click='reload()'>水卡开卡</el-menu-item>
                <el-menu-item index="/userapplylist" :class="{'isActive': active == '/userapplylist'}" @click='reload()'>水卡开卡记录
                </el-menu-item>
                <el-menu-item index="/cardexamine" :class="{'isActive': active == '/cardexamine' || active == '/lookCardMsg' || active == '/lookCardMsg'||active=='/lookCardEdit' || active=='/changeapply'}" @click='reload()'>线上实体卡申请记录
                </el-menu-item>

              </el-menu-item-group>
            </el-submenu>
            <!--卡库管理-->
            <el-submenu index="/cardWarehouse">
              <template slot="title">卡库管理</template>
              <el-menu-item-group>
                <el-menu-item index="/cardWarehouse" :class="{'isActive': active == '/cardWarehouse' || active == '/cardWarehouse' || active =='/expenseCalendar'}" @click='reload()'>卡库</el-menu-item>
                <el-menu-item index="/cardstorage" :class="{'isActive': active == '/cardstorage' || active == '/cardstorage' || active =='/cardstorage'}" @click='reload()'>水卡入库</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--特殊水卡-->
            <el-submenu index="/Sordinaryapply">
              <template slot="title">特殊水卡</template>
              <el-menu-item-group>
                <el-menu-item index="/applylist" :class="{'isActive': active == '/applylist' || active == '/makecard' || active == '/checkcard' }" @click='reload()'>水卡开卡记录</el-menu-item>
                <el-menu-item index="/Sordinaryapply" :class="{'isActive': active == '/Sordinaryapply'}" @click='reload()'>水卡开卡</el-menu-item>
                <el-menu-item index="/cardlimited" :class="{'isActive': active == '/cardlimited' || active == '/cardlimited' }" @click='reload()'>水卡年审/月审</el-menu-item>

              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
      <!-- 右侧主内容区 -->
      <div class="main-right">
        <transition name="fade">
          <router-view class="view" :key='activeDate'></router-view>
        </transition>
      </div>
    </main>
  </div>
</template>
<script>
export default {
  name: 'cardmanagement',
  data: function() {
    return {
      activeDate: '', //重新刷新页面
      chooseIt: 5,
      active: '/cardrechargeol',
      headerFixed: true,
    }
  },
  created: function() {
	  this.active = this.$route.path;
  },
   // 提供可注入子组件属性
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			//当前选中状态 reload定义
			reload() {
				// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
				this.$nextTick(() => {
					this.activeDate = Number(Date.parse(new Date()));
				})
			},

    //获取屏幕高度
    getHeight() {
      var newHeight = $(window).height() - 100;
      $('.mainShow').css("min-height", newHeight + 'px');
    },

  },
  mounted() {
    this.getHeight();

  },
  watch: {
    '$route': function(to, from) {
      this.active = to.path;
    },
    deep: true
  }
}

</script>
<style>
body {
  margin: 0;
}

</style>
